<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据统计</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/all.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <style>
        .stat-card {
            transition: transform 0.2s;
            cursor: pointer;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .stat-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 24px;
        }
        .trend-indicator {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 12px;
        }
        .chart-container {
            height: 300px;
            margin-top: 1rem;
        }
    </style>
</head>
<body>
    <div id="statisticsApp" class="container-fluid p-4">
        <!-- 顶部筛选区域 -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-auto">
                        <select class="form-select" v-model="selectedTemplate">
                            <option value="">全部模板</option>
                            <option v-for="template in templates" 
                                    :key="template.id" 
                                    :value="template.id">
                                {{ template.name }}
                            </option>
                        </select>
                    </div>
                    <div class="col-auto">
                        <div class="btn-group">
                            <button class="btn" 
                                    :class="timeRange === 'today' ? 'btn-primary' : 'btn-outline-primary'"
                                    @click="timeRange = 'today'">
                                今日
                            </button>
                            <button class="btn" 
                                    :class="timeRange === 'yesterday' ? 'btn-primary' : 'btn-outline-primary'"
                                    @click="timeRange = 'yesterday'">
                                昨日
                            </button>
                            <button class="btn" 
                                    :class="timeRange === 'all' ? 'btn-primary' : 'btn-outline-primary'"
                                    @click="timeRange = 'all'">
                                全部
                            </button>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button class="btn btn-success" @click="refreshStats">
                            <i class="fas fa-sync-alt"></i> 刷新数据
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计卡片区域 -->
        <div class="row g-4">
            <!-- 总任务数 -->
            <div class="col-md-3">
                <div class="card stat-card bg-primary bg-gradient text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-2">总任务数</h6>
                                <h3 class="mb-0">{{ stats.totalTasks }}</h3>
                            </div>
                            <div class="stat-icon bg-white text-primary">
                                <i class="fas fa-tasks"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <span class="trend-indicator" :class="stats.tasksTrend > 0 ? 'bg-success' : 'bg-danger'">
                                <i class="fas" :class="stats.tasksTrend > 0 ? 'fa-arrow-up' : 'fa-arrow-down'"></i>
                                {{ Math.abs(stats.tasksTrend) }}%
                            </span>
                            <span class="ms-2 small">较上期</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 提交数量 -->
            <div class="col-md-3">
                <div class="card stat-card bg-success bg-gradient text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-2">提交数量</h6>
                                <h3 class="mb-0">{{ stats.totalSubmissions }}</h3>
                            </div>
                            <div class="stat-icon bg-white text-success">
                                <i class="fas fa-upload"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <span class="trend-indicator" :class="stats.submissionsTrend > 0 ? 'bg-success' : 'bg-danger'">
                                <i class="fas" :class="stats.submissionsTrend > 0 ? 'fa-arrow-up' : 'fa-arrow-down'"></i>
                                {{ Math.abs(stats.submissionsTrend) }}%
                            </span>
                            <span class="ms-2 small">较上期</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 通过率 -->
            <div class="col-md-3">
                <div class="card stat-card bg-info bg-gradient text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-2">通过率</h6>
                                <h3 class="mb-0">{{ stats.approvalRate }}%</h3>
                            </div>
                            <div class="stat-icon bg-white text-info">
                                <i class="fas fa-check-circle"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <span class="trend-indicator" :class="stats.approvalTrend > 0 ? 'bg-success' : 'bg-danger'">
                                <i class="fas" :class="stats.approvalTrend > 0 ? 'fa-arrow-up' : 'fa-arrow-down'"></i>
                                {{ Math.abs(stats.approvalTrend) }}%
                            </span>
                            <span class="ms-2 small">较上期</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 活跃用户 -->
            <div class="col-md-3">
                <div class="card stat-card bg-warning bg-gradient text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-2">活跃用户</h6>
                                <h3 class="mb-0">{{ stats.activeUsers }}</h3>
                            </div>
                            <div class="stat-icon bg-white text-warning">
                                <i class="fas fa-users"></i>
                            </div>
                        </div>
                        <div class="mt-3">
                            <span class="trend-indicator" :class="stats.usersTrend > 0 ? 'bg-success' : 'bg-danger'">
                                <i class="fas" :class="stats.usersTrend > 0 ? 'fa-arrow-up' : 'fa-arrow-down'"></i>
                                {{ Math.abs(stats.usersTrend) }}%
                            </span>
                            <span class="ms-2 small">较上期</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row mt-4">
            <!-- 任务状态分布 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">任务状态分布</h5>
                    </div>
                    <div class="card-body">
                        <div id="taskStatusChart" class="chart-container"></div>
                    </div>
                </div>
            </div>

            <!-- 提交趋势 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">提交趋势</h5>
                    </div>
                    <div class="card-body">
                        <div id="submissionTrendChart" class="chart-container"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 详细数据表格 -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title mb-0">详细数据</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>模板名称</th>
                                <th>总任务数</th>
                                <th>提交数量</th>
                                <th>通过数量</th>
                                <th>拒绝数量</th>
                                <th>通过率</th>
                                <th>活跃用户</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in stats.detailList" :key="item.templateId">
                                <td>{{ item.template_name }}</td>
                                <td>{{ item.total_tasks }}</td>
                                <td>{{ item.submissions }}</td>
                                <td>{{ item.approved }}</td>
                                <td>{{ item.rejected }}</td>
                                <td>{{ item.approvalRate }}%</td>
                                <td>{{ item.active_users }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/lib/vue.min.js"></script>
    <script src="../js/lib/echarts.min.js"></script>
    <script src="../js/lib/bootstrap.bundle.min.js"></script>
    <script src="../js/pages/statistics.js"></script>
</body>
</html> 